<script lang="ts" setup>
import { getSkin } from '@/utils/cache/localStorage';
import { SkinLogo } from '@/modules/skinLogo';
import { Vector2, Vector3 } from 'three';

const props = defineProps({
  collapse: {
    type: Boolean,
    default: true
  }
})

const show = ref<boolean>(false);

const change = () => {
  show.value = !show.value;
}

let skinLogo: SkinLogo;
let imageURL: any;

const user_skin_logo = ref<string>();

const initSkinLogo = (imageURL: string) => {

  // console.log(canvas.value)
  skinLogo = new SkinLogo();

  skinLogo.initSkin(imageURL);

  skinLogo.initLoaded(() => {

    skinLogo.head.position.set(0, 0, 0);

    skinLogo.scene.add(skinLogo.head);

    skinLogo.frameByFrame();

  })

  skinLogo.initSkinLoaded(() => {
    user_skin_logo.value = skinLogo.skin.headCanvas().toDataURL();
    if (!props.collapse) {
      skinLogo.init();
      let canvas = document.getElementById('canvas') as any;
      skinLogo.addCanvas(canvas);
    }
  })

}

const onPointerMove = (event: MouseEvent) => {
  let mouse = new Vector2();
  //将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = 1 - (event.clientY / window.innerHeight) * 2;
  skinLogo.skin.object.children[0].rotateOnAxis(new Vector3(0, 1, 0), Math.PI / 180 * 30)
  console.log(skinLogo.skin.object.children[0]);

}


onMounted(() => {
  imageURL = getSkin();
  initSkinLogo(imageURL);
})

watch(() => [props.collapse], ([newV], [oldV]) => {
  if (!newV) {
    if (!skinLogo.INIT) {
      setTimeout(() => {
        skinLogo.init();
        let canvas = document.getElementById('canvas') as any;
        skinLogo.addCanvas(canvas);
      }, 300)

    } else {
      setTimeout(() => {
        let canvas = document.getElementById('canvas') as any;
        skinLogo.addCanvas(canvas);
      })
    }


  } else if (newV) {
    // skinLogo.scene.remove(skinLogo.skin.object.children[0]);
  }
})

onMounted(() => {

})

</script>

<template>
  <div class="sidebar-logo-container" :class="{ collapse: props.collapse }">
    <transition name="sidebar-logo-fade">
      <router-link v-if="props.collapse" key="collapse" to="/">
        <img v-show="!show" src="https://cdn.jsdelivr.net/gh/wuxin0011/web-cdn-resource@main/image/logo.png"
          class="sidebar-logo" @click="change" />
        <img v-show="show" :src="user_skin_logo" alt="" class="sidebar-logo" @click="change">
      </router-link>
      <router-link v-else key="expand" to="/">
        <img v-show="!show" src="https://cdn.jsdelivr.net/gh/wuxin0011/web-cdn-resource@main/image/logo.png"
          class="sidebar-logo-text" @click="change" />
        <div v-show="show" id="canvas" ref="canvas" class="sidebar-logo-text" @click="change"></div>
      </router-link>
    </transition>
  </div>
</template>

<style lang="scss" scoped>
.sidebar-logo-container {
  position: relative;
  width: 100%;
  height: var(--v3-header-height);
  line-height: var(--v3-header-height);

  // background-color: var(--v3-sidebarlogo-bg-color);
  text-align: center;
  overflow: hidden;

  .sidebar-logo {
    display: none;
  }

  .sidebar-logo-text {
    height: 100%;
    vertical-align: middle;

    canvas {
      vertical-align: middle;
    }
  }
}

.collapse {

  display: flex;
  justify-content: center;
  flex-direction: column;

  .sidebar-logo {
    width: 50px;
    height: 50px;
    display: inline-block;
  }

  .sidebar-logo-text {
    display: none;

  }
}
</style>
